<template>
    <div class="view-container">
        <div class="addCate">
            <!--请求内部分类渲染-->
            <!--动态渲染分类-->
            <div class="oneCategory" ref="oneCategory" id="oneCate" v-for="(item,index) in lists" :key="item.id">
                <h3 style="color: #20a0ff">一级分类</h3>
                <el-button icon="delete" @click="removeItem(item.id)"></el-button>
                <p v-text="item.name" style="width: 500px;height: 26px;margin-left: 100px;color: #333;"></p>
                <h4 style="color: #20a0ff;margin-left: 100px">二级分类</h4>
                <p v-text="a.name" v-for="a in item.children" :key="a.id"
                   style="width: 500px;height: 26px;margin-left: 200px;color: #333;" :disabled="true"></p>
            </div>


            <!--新增的-->
            <h2 style="font-weight: 300">添加分类(二级分类至少添加一项)</h2>
            <div class="oneCategory addCategory" :model="dynamicData">
                <h3 style="color: #20a0ff">一级分类</h3>
                <el-input style="width: 500px;height: 36px;margin-bottom: 24px;"
                          v-model="dynamicData.firCate"></el-input>
                <br>
                <h4 style="color: #20a0ff;">二级分类(必须添加一项二级分类)</h4>
                <el-input style="width: 500px;height: 36px;margin-bottom: 25px" ref="secCategory"
                          v-for="(secCate,index) in dynamicData.secCates" v-model="secCate.name"
                          :key="secCate.id"></el-input>
                <el-button class="addSecCate" @click="newInput" :plain="true"
                           style="margin-bottom: 25px">+继续添加二级分类
                </el-button>
                <br>
                <el-button @click="reset" type="primary">重置</el-button>
                <el-button @click="addCate" type="primary">确认添加</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    //    import {KEY, setItem, getItem, remoteItem} from '@/utils/localStorage';
    import {getCategory} from '@/api/category'
    import {deleteMerchantCategory,getMerchantCategory,addMerchantCategory} from '@/api/merchantCategory'

    export default {
        name: 'goodsCategory',
        data() {
            return {
//        num:0,
                isClick: false,
                dynamicData: {
                    firCate: '',
                    secCates: [
                        {
                            name: '',
                            id: Date.now()
                        }
                    ]
                },
                lists: [
//          {
//            "children": [
//              {
//                name: "测试",
//                id: 1
//              },
//              {
//                name: "测试",
//                id: 2
//              }
//            ],
//            "id": 1,
//            "name": "qwer"
//          },
//          {
//            "children": [
//              {
//                name: "测试",
//                id: 1
//              },
//              {
//                name: "测试",
//                id: 2
//              }
//            ],
//            "id": 4,
//            "name": "nnn"
//
                ]
            }
        },
        created() {

        },
        mounted() {
            setTimeout(
//                {
//                    "children":
//                      [
//                        {
//                            name: "测试",
//                            id: 1
//                        },
//                        {
//                            name: "测试",
//                            id: 2
//                        }
//                    ],
//                    "id": 4,
//                    "name": "nnn"
//                }
                this.getCat()
                , 20)
        },
        methods: {
            getCat() {
//                console.log(this.$store.getters.id)
                getMerchantCategory(this.$store.getters.id)
                    .then((resp) => {
                    for (var i = 0; i < resp.data.list.length; i++) {
                        let item = resp.data.list[i];
                        let c = {
                            "name": item.name,
                            "id": item.parentId,
                            "children": []
                        };
                        if (item.children === null) {
                            c.children = [];
                            this.lists.push(c)
                        } else {
                            for (let item1 of item.children) {
                                let a = {
                                    name: item1.name,
                                    id: item1.id,
                                    children: []
                                };
                                c.children.push(a)
                            }
                            this.lists.push(c)
                        }
                    }
                })
                    .catch((err) => {
//                    console.log(err)
                })
            },
            addCate() {
//            提交新增分类
                let addCat = {
                    "name": this.dynamicData.firCate,
                    "children": []
//                    "id": Math.random() * 10
                };

                for (let item of this.dynamicData.secCates) {
                    addCat.children.push(item)
                }
//                this.lists.push(addCat)
//                setItem(this.lists);
//                post请求后 添加以后在将 lists重新赋值
                let data={
                    "merchantId": this.$store.getters.id,
                    "name": this.dynamicData.firCate,
                    "parentId": 87580,
                    "level": 77936
                };
                this.dynamicData.firCate = '';
                this.dynamicData.secCates = [];
            },
            newInput() {
                this.dynamicData.secCates.push({
                    name: '',
                    key: Date.now()
                })
            },
            removeItem(id) {
                /* var arr = JSON.parse(localStorage.getItem(KEY))
                 for (var i = arr.length - 1; i >= 0; i--) {
                     if (arr[i].id == key) {
                         arr.splice(i, 1);
                     }
                 }
                 localStorage.setItem(KEY, JSON.stringify(arr));
                 this.lists = getItem()*/
                deleteMerchantCategory(id).then((resp) => {
//                    console.log(resp);
                    this.getCat()
                }).catch((err) => {
//                    console.log(err);
                });

//          这里要刷新才能看到被删除
            },
            reset() {
                this.dynamicData.firCate = '';
                this.dynamicData.secCates = [];
            }
        }
    }
</script>

<style lang="less" scoped>
    .addCate {
        .oneCategory {
            width: 607px;
            /*height: 246px;*/
            border: 1px solid #eee;
            margin-bottom: 24px;
            padding: 24px;
            position: relative;
            .el-button {
                &:first-of-type {
                    position: absolute;
                    right: 10px;
                    top: 10px;
                    padding: 10px;
                }
            }
        }
        .addMainCate {
            width: 607px;
            height: 36px;
            border: 1px dashed #20a0ff;
        }
        .addCategory {
            .el-button {
                &:first-of-type {
                    position: static;
                    border: 0;
                    outline: none;
                }
            }
        }
    }

</style>
